<template>
	<div class="index">
    <div style="padding: 0rem 0rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">{{title}}</div>
    </div>
    <div style="padding: 0.3rem;">
      <div style="margin-bottom: 0.3rem;" class="flexbc">
        <van-search style="padding: 0; width: 5rem;"
          v-model="all.khmc"
          placeholder="请输入客户名称"
          @search="search()"
        >
        <!-- <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        <view slot="action" bind:tap="search">搜索</view> -->
        </van-search>
        <div class="flexc" @click="log1 = true"><van-icon name="filter-o" style="margin-right: 0.1rem;" size="20px" />高级搜索</div>
      </div>


      <div class="yy" v-for="(item,index) in list" :key="index" style="margin-bottom: 0.2rem;" @click="goxiangqing('/kehu/xiangqing',item.id)">
        <div class="flexbc" style="border-bottom: 1px dashed #ddd;">
          <div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">{{item.khmc}}</div>
          <div  v-if="person.title == '销售内勤'"><van-icon name="edit" color="#259b24" size="0.35rem" style=" font-weight: bold;" @click.stop="gobianji('/kehu/xinjiankehu',item.id)"/></div>
        </div>

    		<div class="flex" style="padding-top: 0.2rem;">
    			<div style="flex: 1; overflow: hidden;">
    				<div style="color: #999; margin-bottom: 0.1rem;">跟进状态</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">{{item.gjzt}}</div>

    				<div style="color: #999; margin-bottom: 0.1rem;">创建时间</div>
    				<div style="color: #666; margin-bottom: 0.2rem;" >{{item.createtime}}</div>

            <div style="color: #999; margin-bottom: 0.1rem;">最近一次拜访</div>
            <div style="color: #666; margin-bottom: 0.2rem;">{{item.lasttime}}</div>
    			</div>
    			<!-- <div style="flex: 1; overflow: hidden;">


    			</div> -->
    			<div style="flex: 1; overflow: hidden;">
            <div style="color: #999; margin-bottom: 0.1rem;">客户类型</div>
            <div style="color: #666; margin-bottom: 0.2rem;">{{item.khlx}}</div>

    				<div style="color: #999; margin-bottom: 0.1rem;">联系电话</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">{{item.dh}}</div>

    				<div style="color: #999; margin-bottom: 0.1rem;">客户状态</div>
    				<div style="color: #259b24; " v-if="item.spzt == 0">已审批</div>
    				<div style="color: #1989fa; " v-if="item.spzt == 1">待审批</div>
    				<div style="color: #f00; " v-if="item.spzt == 2">不通过</div>
    			</div>
    		</div>
    	</div>
      <div v-if="list.length == 0" class="flexcc" style="color: #666; margin: 20px 0;">
        没有相关信息
      </div>

    	<div class="flexcc" v-if="person.title == '销售内勤'">
    		<div><van-icon name="add-o" size="0.35rem" style="margin-right: 0.1rem;" /></div>
    		<div @click="go2('/kehu/xinjiankehu?gonghai=true')" v-if="gonghaikehu">点击添加公海客户</div>
        <div @click="go2('/kehu/xinjiankehu')" v-if="!gonghaikehu">点击添加客户</div>
    	</div>

      <div class="flexcc" v-if="person.title != '销售内勤' && !gonghaikehu">
      	<div><van-icon name="add-o" size="0.35rem" style="margin-right: 0.1rem;" /></div>
        <div @click="go2('/kehu/xinjiankehu')" >点击添加客户</div>
      </div>
    </div>



    <van-popup v-model="tuihuilog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">退回至公海客户</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户退回至公海客户？</div>
    			<div>转移成功后，此客户数据将属于公共资源，原负责人不能再维护跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem;">取消</van-button>
    			<van-button type="info" size="small" >确认</van-button>
    		</div>
    	</div>
    </van-popup>

    <van-popup v-model="shanchulog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">删除客户</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户删除？</div>
    			<div>删除成功后，原负责人不能再维护跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem;">取消</van-button>
    			<van-button type="info" size="small" >确认</van-button>
    		</div>
    	</div>
    </van-popup>

    <van-popup v-model="log1" position="bottom">
      <div style="padding: 0.3rem;">
        <div style="margin-bottom: 0.1rem;">客户类型：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <div @click="changekhlx(item)" class="lact" :class="all.khlx==item?'lactli':''" v-for="item in kehuleixing" :key="item">{{item}}</div>
        </div>

        <div style="margin-bottom: 0.1rem;">跟进状态：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <div @click="changegjzt(item)" class="lact" :class="all.gjzt.includes(item)?'lactli':''" v-for="item in genjinzhuangtai" :key="item">{{item}}</div>
        </div>

        <div style="margin-bottom: 0.1rem;">客户来源：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <div @click="changekhly(item)" class="lact" :class="all.khly.includes(item)?'lactli':''" v-for="item in kehulaiyuan" :key="item">{{item}}</div>
        </div>

        <div style="margin-bottom: 0.1rem;">创建时间：</div>
        <div style="margin-bottom: 0.2rem;" class="flexc">
          <van-field readonly v-model="all.cjsjStart" style="border: 1px #ddd solid; width: 3rem; padding: 5px 16px; margin-right: 0.1rem;" size="small" placeholder="请选择开始时间" @click="shijianlog1 = true" />-
          <van-field readonly v-model="all.cjsjEnd"  style="border: 1px #ddd solid;  width: 3rem; padding: 5px 16px; margin-left: 0.1rem;" size="small" placeholder="请选择结束时间" @click="shijianlog2 = true" />
        </div>

        <div class="flexcc">
        	<van-button type="default" size="small" style="margin-right: 0.6rem; padding: 0rem 0.5rem;" @click="chongzhi">重置</van-button>
          <!-- //公海客户搜索 -->
        	<van-button type="info" size="small" style="padding: 0rem 0.5rem;" @click="search3" v-if="gonghaikehu">确认</van-button>
          <!-- //普通客户搜索 -->
          <van-button type="info" size="small" style="padding: 0rem 0.5rem;" @click="search4" v-if="!gonghaikehu">确认</van-button>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="shijianlog1" position="bottom" >
    	<van-datetime-picker v-model="all.cjsjStart" type="date" title="选择时间" @confirm="shijianConfirm1" @cancel="shijianCancel1" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>
    <van-popup v-model="shijianlog2" position="bottom" >
    	<van-datetime-picker v-model="all.cjsjEnd" type="date" title="选择时间" @confirm="shijianConfirm2" @cancel="shijianCancel2" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>

	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
	export default {
		name: 'kehulist',
		data() {
			return {
        act:3,
        tuihuilog:false,
        shanchulog:false,
        shijianlog1:false,
        shijianlog2:false,
        list:[],
        all:{
          fzrid:"",
          khlx:"",
          gjzt:[],
          khly:[],
          cjsjStart:"",
          cjsjEnd:"",
          khmc:""
        },
        log1:false,
        kehuleixing:['重要客户','普通客户','低价值客户'],
        genjinzhuangtai:['初访','意向','报价','成交','搁置','未成交','无意向','长期服务'],
        kehulaiyuan:['主动拜访','公海','转介绍','展会','网络','其他'],
        suoshuhangye:['金融','服务','事业单位'],
        renyuanguimo:['10-20人','20-50人','50-100人','100-500人','500人以上'],

        title:"客户列表",

        gonghaikehu:false,

        person:JSON.parse(localStorage.getItem('person'))
			}
		},
		created() {
      console.log('--------------------------------')
      if(this.$route.query.gonghai){
        this.title = "公海客户列表"
        this.gonghaikehu = true
        this.getlist2()
      }else{
        this.all.fzrid = JSON.parse(localStorage.getItem('person')).userid
        this.title = "客户列表"
        this.getlist()
      }
		},
		mounted() {

		},
		methods: {
      go2:function(url){
        if(this.gonghaikehu){
          this.$router.push(url+'?gonghai=true')
        }else{
          this.$router.push(url)
        }
      },
      goxiangqing:function(url,id){
        if(this.gonghaikehu){
          this.$router.push(url+'?id='+id+'&gonghai=true')
        }else{
          this.$router.push(url+'?id='+id)
        }
      },
      gobianji:function(url,id){
        if(this.gonghaikehu){
          this.$router.push(url+'?id='+id+'&gonghai=true')
        }else{
          this.$router.push(url+'?id='+id)
        }
      },
      chongzhi:function(){
        this.all.khlx = "",
        this.all.gjzt = [],
        this.all.khly = [],
        this.all.cjsjStart = "",
        this.all.cjsjEnd = "",
        this.all.khmc = ""
      },
      changekhlx:function(item){
        this.all.khlx = item
      },
      changegjzt:function(item){
        if(this.all.gjzt.includes(item)){
          this.all.gjzt.splice(this.all.gjzt.indexOf(item),1)
        }else{
          this.all.gjzt.push(item)
        }
      },
      changekhly:function(item){
        if(this.all.khly.includes(item)){
          this.all.khly.splice(this.all.khly.indexOf(item),1)
        }else{
          this.all.khly.push(item)
        }
      },
      search:function(){
        console.log(this.all)
        if(this.gonghaikehu){
          this.getlist2()
        }else{
          this.getlist()
        }
        this.log1 = false
      },
      getlist:function(){
        let obj = JSON.parse(JSON.stringify(this.all))
        obj.gjzt = obj.gjzt.toString()
        obj.khly = obj.khly.toString()
        console.log(obj)
        axios.get('/Customer/queryCustomerList',{params:obj}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      search4:function(){
        this.getlist4()
        this.log1 = false
      },
      getlist4:function(){
        let obj = JSON.parse(JSON.stringify(this.all))
        obj.gjzt = obj.gjzt.toString()
        obj.khly = obj.khly.toString()
        console.log(obj)
        axios.get('/Customer/queryCustomerListByCon',{params:obj}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },


      //公海高级
      search3:function(){
        this.getlist3()
        this.log1 = false
      },
      getlist3:function(){
        let obj = JSON.parse(JSON.stringify(this.all))
        obj.gjzt = obj.gjzt.toString()
        obj.khly = obj.khly.toString()
        console.log(obj)
        axios.get('/OpenCustomer/queryOpencustomerListByCon',{params:obj}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      //公海客户列表
      getlist2:function(){
        let obj = JSON.parse(JSON.stringify(this.all))
        obj.gjzt = obj.gjzt.toString()
        obj.khly = obj.khly.toString()
        console.log(obj)
        axios.get('/OpenCustomer/queryOpencustomerList',{params:obj}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },


      shijianConfirm1:function(val){
        this.all.cjsjStart =  moment(val).format('YYYY-MM-DD')
      	this.shijianlog1 = false
      },
      shijianConfirm2:function(val){
        this.all.cjsjEnd =  moment(val).format('YYYY-MM-DD')
      	this.shijianlog2 = false
      },
      shijianCancel1:function(val){
        this.shijianlog1 = false
      },
      shijianCancel2:function(val){
        this.shijianlog2 = false
      },
		}
	}
</script>


<style scoped lang="less">
    .lact{ padding: 0.1rem 0.3rem; background: #fff; margin-right: 0.2rem; border-radius: 4px; border: 1px #ddd solid; margin-bottom: 0.2rem;}
    .lactli { background: #1989fa !important; color: #fff !important;  border: 1px #1989fa solid !important;}

    .yy {
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.2rem 0.3rem;
      margin-bottom: 0.3rem;
    }

    .act {
      background: #ccc !important;
      color: #FFFFFF;
      padding: 0.1rem 0.2rem;
      border-radius: 0.1rem;
    }

    .act1 {
      background: #fff;
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.1rem 0.2rem;
      margin-left: 0.2rem;
      border-radius: 0.1rem;
    }

</style>
